import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import './index.css';

// [{ name: 1, age: 2 }].map(item => {
//   return { name: item.name, age: item.age };
// });
/**
在React的开发模式下，使用<React.StrictMode>包裹组件会导致某些副作用和渲染操作被有意地执行两次。
这是React团队为了帮助开发者发现潜在问题而设计的一种机制。具体来说，<React.StrictMode>会在以下方面产生影响：

检测不安全的生命周期方法：React会模拟未来的React版本中的行为，帮助开发者提前发现并修复不安全的生命周期方法。
检测意外的副作用：通过在开发模式下多次调用某些生命周期方法和渲染函数，React可以帮助开发者发现那些不应该在渲染过程中产生的副作用。
具体表现
在你的例子中，console.log('App render'); 会被执行两次，这是因为：

首次渲染：React正常渲染组件。
第二次渲染：React为了检测潜在问题，再次渲染组件
 */
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>
);
